/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */

function getWeather(cityCode) {
    myAxios({
        url: 'https://hmajax.itheima.net/api/weather',
        params: {
            city: cityCode
        }
    }).then((result) => {
        console.log(result);
        const city_weather = result.data
        const date = `
        <span class="dateShort">${city_weather.date}</span>
        <span class="calendar">农历&nbsp;
          <span class="dateLunar">${city_weather.dateLunar}</span>
        </span>
        `
        document.querySelector('.title').innerHTML = date
        document.querySelector('.area').innerHTML = city_weather.area
        document.querySelector('.temperature').innerHTML = city_weather.temperature

        const air = `
          <span class="psPm25">${city_weather.psPm25}</span>
          <span class="psPm25Level">${city_weather.psPm25Level}</span>
        `
        document.querySelector('.air').innerHTML = air

        const weather_list = `
             <li>
            <img src="${city_weather.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${city_weather.weather}</span>
          </li>
          <li class="windDirection">${city_weather.windDirection}</li>
          <li class="windPower">${city_weather.windPower}</li>
        `

        document.querySelector('.weather-list').innerHTML = weather_list

        const today_weather = `
            <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${city_weather.weather}</span>
          <span class="temNight">${city_weather.todayWeather.temNight}</span>
          <span>-</span>
          <span class="temDay">${city_weather.todayWeather.temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${city_weather.todayWeather.ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${city_weather.todayWeather.humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${city_weather.todayWeather.sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${city_weather.todayWeather.sunsetTime}</span>
        </li>
      </ul>
        `

        document.querySelector('.today-weather').innerHTML = today_weather

        const week_wrap = `
             <li class="item">
          <div class="date-box">
            <span class="dateFormat">今天</span>
            <span class="date">10月28日</span>
          </div>
          <img src="./imgs/多云.png" alt="" class="weatherImg">
          <span class="weather">多云</span>
          <div class="temp">
            <span class="temNight">12</span>-
            <span class="temDay">12</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">东南风</span>
            <span class="windPower">&lt;3级</span>
          </div>
        </li>
        `

        const dayForecast = city_weather.dayForecast
        const seven_weathers = dayForecast.map((item) => {
            return `
                             <li class="item">
          <div class="date-box">
            <span class="dateFormat">${item.dateFormat}</span>
            <span class="date">${item.date}</span>
          </div>
          <img src="${item.weatherImg}" alt="" class="weatherImg">
          <span class="weather">${item.weather}</span>
          <div class="temp">
            <span class="temNight">${item.temNight}</span>-
            <span class="temDay">${item.temDay}</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">${item.windDirection}</span>
            <span class="windPower">&lt;${item.windPower}</span>
          </div>
        </li>
            `
        }).join('')
        document.querySelector('.week-wrap').innerHTML = seven_weathers
    }).catch((err) => {
    });
}

/**
 * 进入网页渲染一次
 */
getWeather('110100')


/**
 * 搜索城市列表
 */

document.querySelector('.search-city').addEventListener('input', (e) => {
    myAxios({
        url: 'https://hmajax.itheima.net/api/weather/city',
        params: {
            city: e.target.value
        }
    }).then(res => {
        console.log(res);
        const city_item = `
            <li class="city-item">北京市</li>
        `

        const cityList = res.data
        const strCity = cityList.map(item => {
            return `
            <li class="city-item" data-code="${item.code}">${item.name}</li>
            `
        })
        document.querySelector('.search-list').innerHTML = strCity.join('')
    })
})

document.querySelector('.search-list').addEventListener('click', e => {
    if (e.target.classList.contains('city-item')) {
        console.log(e.target.dataset.code)
        getWeather(e.target.dataset.code)
    }
})